{include file="public/layout" /}
<body class="laytp-container">

    <div class="layui-card">
        <div class="layui-card-header">更新公告管理</div>
        <div class="layui-card-body">
            <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">公告标题</label>
                        <div class="layui-input-block">
                            <input type="text" name="search" placeholder="请输入" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="LAY-app-search">
                            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
<div class="layui-card">
    <div class="layui-card-body">
        <table id="announcement-table" lay-filter="announcement-table"></table>
    </div>
</div>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" onclick="add()">
            添加公告
        </button>
        <button class="layui-btn layui-btn-sm" onclick="del()">
            删除
        </button>

    </div>
</script>
<script>
    layui.use(function(){
        var $ = layui.$;
        var table = layui.table;
        var form = layui.form;
        
        // 表格渲染
        table.render({
            elem: '#announcement-table',
            url: '{:url("Forum/index")}', // 数据接口
            toolbar: '#toolbarDemo',
            page: true, // 开启分页
            limit: 15,
            cols: [[ // 表头
                {field: 'id', title: 'ID', width: 80, sort: true},
                {field: 'title', title: '公告标题', width: 300},
                {field: 'create_time', title: '发布时间', width: 180, sort: true},
                {field: 'view_count', title: '浏览量', width: 100, sort: true},
                {title: '操作', width: 150, align: 'center', toolbar: '#table-list-toolbar'}
            ]]
        });
        
        // 监听搜索
        form.on('submit(LAY-app-search)', function(data){
            var field = data.field;
            
            // 执行重载
            table.reload('announcement-table', {
                where: field
            });
        });
        


        
        $('.layui-btn.layuiadmin-btn-list').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        
        // 监听工具条
        table.on('tool(announcement-table)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('确定删除此公告？', function(index){
                    $.ajax({
                        url: '{:url("announcement/delete")}',
                        type: 'POST',
                        data: {id: data.id},
                        success: function(res){
                            if(res.code === 0){
                                layer.msg(res.msg, {icon: 1});
                                obj.del(); // 删除对应行
                                layer.close(index);
                            } else {
                                layer.msg(res.msg, {icon: 2});
                            }
                        }
                    });
                });
            }
        });
    });
    // 事件
    function add(){
        layer.open({
            title: '添加',
            type: 2,
            shadeClose: true,
            area: ['100%','100%'],
            scrollbar:false,
            content: '{:url("add")}'
        });
    }
</script>
</body>
</html>